<template>
  <div class="flex-yc sms-code-input" :style="{ width, height }">
    <el-input
      size="large"
      class="not-shadow input-bgc"
      :placeholder="placeholder"
      @input="onInput"
    ></el-input>
    <el-button
      type="primary"
      size="large"
      @click="onSubmitSmsCode"
      :disabled="btnDisabled"
    >
      {{ btnTxt }}
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = withDefaults(
  defineProps<{
    placeholder?: string
    modeValue: string
    width?: string
    height?: string
    time?: number
  }>(),
  {
    placeholder: '请输入验证码',
    height: '40px',
    width: '100%',
    time: 60,
  },
)

const $emit = defineEmits<{
  (e: 'update:modeValue', value: string | number): void
  (e: 'onSubmitSmsCode'): void
}>()
const onInput = (val: string | number) => {
  $emit('update:modeValue', val)
}
const onSubmitSmsCode = () => {
  $emit('onSubmitSmsCode')
  timeDec()
}

let lastTime = ref(props.time)
let btnTxt = ref('获取验证码')
let btnDisabled = ref(false)
const timeDec = () => {
  btnDisabled.value = true
  btnTxt.value = `剩余${lastTime.value}s`
  let timer = setInterval(() => {
    lastTime.value--
    btnTxt.value = `剩余${lastTime.value}s`
    if (lastTime.value < 1) {
      lastTime.value = props.time
      btnTxt.value = '获取验证码'
      btnDisabled.value = false
      clearInterval(timer)
    }
  }, 1000)
}
</script>

<style scoped lang="scss">
//.sms-code-input {
//  :deep(.el-input) {
//  }
//}
</style>
